<template>
  <div class="learnmore">
    <div class="camp">
      <h1 class="title">Gourmet! <small>グルメ！<span class="ch">美食家！</span></small></h1>
    </div>
    <Planet/>
    <FoodTable/>
    <div class="apply">
      <p class="tag"><b>新颖</b>的内容，<b>优异</b>的成果</p>
      <div class="container">
        <div class="content">
          <div class="top">
            <img class="icon" src="@/assets/learnmore/icon1.png" alt="icon1">
            <p class="text">新颖</p>
          </div>
          <div class="middle">
            <p>&nbsp;&nbsp;&nbsp;&nbsp;在本项目中，选用食品的图像作为分类主题，并合理地将食品划分到了不同种类里面。</p>
            <p>&nbsp;&nbsp;&nbsp;&nbsp;相比市面上同类产品较少见，内容相当新颖。</p>
          </div>
        </div>
        <div class="content">
          <div class="top">
            <img class="icon" src="@/assets/learnmore/icon2.png" alt="icon2">
            <p class="text">优异</p>
          </div>
          <div class="middle">
            <p>&nbsp;&nbsp;&nbsp;&nbsp;在本项目中，选用经典的卷积神经网络模型进行微调，并合理地调整其中的关键参数。</p>
            <p>&nbsp;&nbsp;&nbsp;&nbsp;相比起其他学习研究的项目，成果相当优异。</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Planet from '@/views/common/Planet.vue'
import FoodTable from '@/views/common/FoodTable.vue'

export default {
  name: 'Learnmore',
  components: {
    Planet,
    FoodTable
  }
}
</script>

<style lang="scss">
.learnmore {
  background-color: #1a1832;

  .camp {
    color: #1acfff;
    padding-top: 40px;

    .title {
      font-size: 56px;
      text-align: center;
      text-shadow: 4px 4px 4px #1a7cf5;

      small {
        font-size: 32px;
        text-shadow: 2px 2px 2px #1a7cf5;

        .ch {
          color: #d5d6e6;
          text-shadow: 2px 2px 2px #b2b3b4;
        }
      }
    }
  }

  .apply {
    height: 400px;
    color: #d5d6e6;
    padding-top: 48px;

    .tag {
      font-size: 28px;
      text-align: center;

      b {
        color: #1acfff;
      }
    }

    .container {
      width: 660px;
      margin: 0 auto;
      padding-top: 30px;
      display: -webkit-flex;
      display: flex;

      .content {
        width: 320px;
        height: 270px;
        border: 1px solid #1acfff;
        margin-top: 20px;

        .top {
          width: 74px;
          height: 94px;
          margin: 0 auto;
          margin-top: -32px;

          .icon {
            display: block;
            width: 74px;
            height: 66px;
            background-color: #1a1832;
          }

          .text {
            font-size: 22px;
            color: #1acfff;
            text-align: center;
            padding-top: 4px;
          }
        }

        .middle {
          width: 240px;
          height: 160px;
          margin: 0 auto;
          padding-top: 28px;

          p {
            padding-top: 8px;
          }
        }
      }
    }
  }
}
</style>
